<template>
  <!--确认兑换 -->
    <view v-if="info" class=" page">
       <view class="order-goods flex bac-color-fff" >
            <image class="image" :src="info.goods.images[0]" mode="aspectFill">

            </image>
            <view class="flex-1 mar-l-15 flex flex-column justify-center">
                <view class="tq-text-line1 font-bold font-size-16">{{info.goods.name}}</view>
                <view class="num mar-t-30">x {{buy_num}}</view>
            </view>
       </view>
        <view class=" container  bac-color-fff">
            <view class="flex align-center border-b-1 pad-b-10">
                 <view class="font-color-666 font-size-14">积分</view>
                <view class="flex-1 text-right font-bold font-color-price">{{info.goods.score_price}}积分</view>
            </view>
       </view>  
       <view class="ps  bac-color-fff container ">
            <view class="flex align-center">
                <view class="font-size-14 font-color-666">
                    发货时间
                </view>
                <view class="flex-1 text-right font-size-14">
                    订单提交后将在24小时内发货
                </view>
            </view>
            <view class="flex align-center mar-t-20">
                <view class="font-size-14 font-color-666">充值号码:</view>
                <view class="mar-l-10 flex-1 user-phone"><input type="text" name="" id="" v-model="mobile" placeholder="请填写充值号码"></view>
            </view>
            
       </view>
       <view class="footerRule flex align-center justify-between bac-color-fff box-b">
           <view class="flex-1">
               <text class="font-color-888 font-size-12">合计</text>
               <text class="font-color-price font-size-16 mar-l-10">{{info.order_pay_price}}积分</text>
           </view>
           <view class="pad-10">
				<view class="confirm-btn-my font-fa-me font-size-16" @click="confirm">
					确认兑换
				</view>
           </view>
       </view>
    </view>
</template>

<script>
import {scoreBuy,buyNowPay} from '@/utils/http'
export default {
    data(){
        return {
            id:'',
            info:'',
            buy_num:1,
            mobile:'',
        }
    },
  
    methods:{
        scoreBuy(){
            scoreBuy({goods_id:this.id,buy_num:this.buy_num,mobile:this.mobile}).then(res=>{
                if(res){
                    if(res.has_error){
                        this.errorToShow(res.error_msg);
                    }
                    this.info = res
                    this.mobile = res.mobile
                }
            })
        },
        confirm(){
             buyNowPay({goods_id:this.id,buy_num:this.buy_num,mobile:this.mobile}).then(res=>{
                if(res){
                    this.successToShow('购买成功');
                    setTimeout(() => {
                         this.redirect('/pages/score/success')
                    }, 1500);
                    
                }
            })
        }
    },
    onLoad(options){
        this.id = options.id
        this.scoreBuy();
    }
}
</script>

<style scoped>
page{
    background-color: #F6F6F6;
}
.order-goods{
    padding: 17px 15px;
}
.image{
    height: 95px;
    width: 95px;
    background-color: #ccc;
    border-radius: 5px;
}
.ps{
    padding-top: 10px;
    padding-bottom: 20px;
    height: 80px;
    font-size: 13px;
    color: #333;
}
.ps .user-phone{
    /* border:1px #888 solid; */
    border-radius: 3px;
    padding-left: 3px;
    height: 25px;
    line-height: 25px;
    text-align: right;
}
.footerRule{
    position: fixed;
    width: 100%;
    bottom: 0px;
    height:50px;
    padding-left: 15px;
}
.confirm-btn-my{
    text-align: center;
    color: #fff;
    background-color: #F83F20;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}
</style>